<!doctype html>
<style>
#dropzone {
	margin-bottom: 3rem;
}

.dropzone {
	border: 2px dashed #0087F7;
	border-radius: 5px;
	background: white;
}

.dropzone .dz-message {
	font-weight: 400;
}

.dropzone .dz-message .note {
	font-size: 0.8em;
	font-weight: 200;
	display: block;
	margin-top: 1.4rem;
}

.attach-img {
	width: 100px;
	height: 100px;
	border-radius: 10px;
	box-shadow: 0px 0px 8px #333;
}

.attach-text {
	font-size: 12px;
	font-weight: 300;
}

.attach-img:hover {
	background-color: #f9f9f9;
}
</style>
<html>

<head>
<meta charset="utf-8">
<title>后台管理模板</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<!-- <script src="@{'public/Assets/js/jquery-1.8.3.min.js'}"></script> -->

<link rel="stylesheet" href="@{'public/plugins/layui/css/layui.css'}"
	media="all" />
<link rel="stylesheet" href="@{'public/css/global.css'}" media="all">
<link rel="stylesheet" href="@{'public/css/style.min.css'}" media="all">

<link href="@{'public/css/dropzone.min.css'}" rel="stylesheet">
<link rel="stylesheet" href="@{'/public/css/sweetalert2.min.css'}">


<script src="@{'public/js/jquery-2.1.4.min.js'}"></script>

<script src="@{'public/js/clipboard.min.js'}"></script>


<script src="@{'public/js/sweetalert2.min.js'}"></script>
<script src="@{'public/plugins/layui_new/layui.js'}"></script>
<script src="@{'public/js/index.js'}"></script>
<script src="@{'public/js/dropzone.min.js'}"></script>

</head>


<body>

	<div class="m-b-30">
		<form action="#" class="dropzone" id="dropzone">
			<div class="fallback">
				<input name="file" type="file" multiple="multiple">
			</div>
			<div class="dz-message">
				<p>将文件拖至此处或点击上传.${attach_url}</p>
				<p>
					<span style="font-size: 16px; color: #d0d0d0;">一次最多可以上传10个文件</span>
				</p>
			</div>
		</form>
	</div>




	<div class="col-md-12 attach">
		#{if list==null}
		<div class="row">
			<div class="col-md-4 text-center">
				<div class="alert alert-warning">目前还没有一个附件呢，你可以上传试试!</div>
			</div>
		</div>
		#{/if} 
		
		#{list list ,as:'item'}

		<div class="col-md-2 text-center m-t-10" style="float: left;">
			<a  target="_blank"> <img class="attach-img"
				src="http://industrial.b0.upaiyun.com/${item}" title="11" />
			</a>
			<div class="clearfix m-t-10">
				<span class="attach-text" data-toggle="tooltip" data-placement="top"
					data-original-title=""></span>
			</div>


			<div class="clearfix" onclick="delAttachs('${item}')">
				<button  class="btn btn-danger btn-sm waves-effect waves-light m-t-5">
					<i class="fa fa-trash-o"></i> <span>删除</span>
				</button>
			</div>
		</div>
		#{/list}
	</div>



	
	<script type="text/javascript">
	    function delAttachs(img){
	    	$.ajax({
	    		url : "@{manage.delUPYImg()}",
				type : "GET",
				async : false,
				data : {
					"img" : img
				},
				dataType : "text",
				success : function(data) {
						if (data) {
							layer
									.confirm(
											'删除成功！</br>',
											{
												btnAlign : 'c',
												btn : [ '确定' ]
											},
											function() {
												window.location.href = "/manageUpfile";
											});
						} else {
							layer.alert("删除失败!");
						}
					},
					error : function(data) {
						layer
								.alert("您的账户可能出现异常，请重新刷新获取账号信息!");
					}
				});
	    	
	    }
		var tale = new $.tale();
		$("#dropzone").dropzone({
			url : "@{manage.upload()}",
			filesizeBase : 1024,//定义字节算法 默认1000
			maxFiles : 10,//最大文件数量
			maxFilesize : 20, //MB
			fallback : function() {
				tale.alertError('暂不支持您的浏览器上传!');
			},
			uploadMultiple : true,
			dictFileTooBig : '您的文件超过20MB!',
			dictInvalidInputType : '不支持您上传的类型',
			dictMaxFilesExceeded : '您的文件超过10个!',
			init : function() {
				this.on('queuecomplete', function(files) {
					tale.alertOkAndReload('上传成功');

				});
				this.on('error', function(a, errorMessage, result) {
					if (!result.success && result.msg) {
						tale.alertError(result.msg || '上传失败');
					}
				});
				this.on('maxfilesreached', function() {
					this.removeAllFiles(true);
					tale.alertWarn('文件数量超出限制');
				});
			}
		});
	</script>
</body>

</html>

